import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HeorAnimationRoute(),
    );
  }
}

/*
Hero动画
Hero指的是可以在路由(页面)之间“飞行”的widget，
简单来说Hero动画就是在路由切换时，有一个共享的Widget可以在新旧路由间切换，
由于共享的Widget在新旧路由页面上的位置、外观可能有所差异，所以在路由切换时会逐渐过渡，
这样就会产生一个Hero动画。

你可能多次看到过 hero 动画。例如，一个路由中显示待售商品的缩略图列表，
选择一个条目会将其跳转到一个新路由，新路由中包含该商品的详细信息和“购买”按钮。 
在Flutter中将图片从一个路由“飞”到另一个路由称为hero动画，
尽管相同的动作有时也称为 共享元素转换。下面我们通过一个示例来体验一下hero 动画。
*/

/*
假设有两个路由A和B，他们的内容交互如下：

A：包含一个用户头像，圆形，点击后跳到B路由，可以查看大图。

B：显示用户头像原图，矩形；

在AB两个路由之间跳转的时候，用户头像会逐渐过渡到目标路由页的头像上
*/

// 路由A
class HeorAnimationRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('Hero'),
      ),
      body: Container(
        margin: EdgeInsets.only(top: 40),
        alignment: Alignment.topCenter,
        child: InkWell(
          child: Hero(
            tag: 'avatar', //唯一标志，前后两个路由页Hero的tag必须相同
            child: ClipOval(
              child: Image.asset(
                'assets/images/food05.jpeg',
                width: 100,
                height: 100,
                fit: BoxFit.cover,
              ),
            ),
          ),
          onTap: () {
            // 打开路由B
            Navigator.push(context, PageRouteBuilder(pageBuilder:
                (BuildContext context, Animation animation,
                    Animation secondaryAnimation) {
              return FadeTransition(
                opacity: animation,
                child: Scaffold(
                  appBar: AppBar(
                    title: Text('原图'),
                  ),
                  body: HeorAnimationRouteB(),
                ),
              );
            }));
          },
        ),
      ),
    );
  }
}

// 路由B
class HeorAnimationRouteB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Hero(
        tag: 'avatar',
        child: GestureDetector(
          child: Image.asset('assets/images/food05.jpeg'),
          onTap: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}
